<template>
	<div class="publish">
		<div class="crumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/webMain' }">校园论坛</el-breadcrumb-item>
				<el-breadcrumb-item>发布帖子</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="wrap">
			<fieldset>
				<legend>编辑内容</legend>
				<el-form ref="form" :model="form" label-position="top">
					<el-form-item label="类型" prop="type">
						<el-radio v-model="form.type" label="1">综合墙</el-radio>
						<el-radio v-model="form.type" label="2">分享墙</el-radio>
						<el-radio v-model="form.type" label="3">兼职墙</el-radio>
						<el-radio v-model="form.type" label="4">学习交流墙</el-radio>
					</el-form-item>
					<el-form-item label="标题" prop="title">
						<el-input v-model="form.title" placeholder="请输入标题" />
					</el-form-item>
					<el-form-item label="内容">
						<editor v-model="form.content" :min-height="300"/>
					</el-form-item>
					<el-form-item>
						<el-upload
						class="upload-demo"
						ref="upload"
						action="https://jsonplaceholder.typicode.com/posts/"
						:on-preview="handlePreview"
						:on-remove="handleRemove"
						:file-list="fileList"
						:auto-upload="false">
						<el-button slot="trigger" size="small" type="danger">选取附件</el-button>
						<el-button style="margin-left: 10px;" size="small" type="danger" @click="submitUpload">上传附件</el-button>
						</el-upload>
					</el-form-item>
				</el-form>
			</fieldset>
			<div class="publish-btn">
				<el-button type="danger" size="small">确认发布</el-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Publish',
	data() { 
		return {
			//编辑表单
			form: {
				type: '1',
				title: '',
				content: ''
			},
			fileList: [
				{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, 
				{ name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
			]
      };
    },
    methods: {
		submitUpload() {
			this.$refs.upload.submit();
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePreview(file) {
			console.log(file);
		}
	}
}
</script>

<style lang="scss" scoped>
.publish {
	width: 100%;
	height: auto;
	.crumb {
		width: 1280px;
		margin: 0 auto;
		padding: 15px 0 15px 0;
	}
	.wrap {
		width: 1280px;
		height: auto;
		margin: 0 auto;
		padding: 20px 0;
		fieldset {
			border-color: #80A681;
			border-width: 1px;
			padding-top: 20px;
		}
		legend {
			color: #80A681;
		}
		.publish-btn {
			padding-top: 20px;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}
	}
}
::v-deep .el-button--danger {
	background-color: #80A681 !important;
	border-color: #80A681 !important;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
	background-color: #80A681 !important;
	border-color: #80A681 !important;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
	color: #80A681 !important;
}
</style>